<template>
    <div class="rule_item_container">
        <template v-if="row.type === 1">
            <el-input v-model="row.value1" clearable @change="handleChangeInput($event, row)" />
        </template>
        <template v-else-if="row.type === 4">
            <div class="inline_item flex2">
                <el-input onkeyup="this.value=this.value.replace(/\D|^0/g,'')"
                          onafterpaste="this.value=this.value.replace(/\D|^0/g,'')"
                          placeholder="顺序号的位数，最小为1"
                          v-model="row.value2" :min="1" clearable />
            </div>
            <div class="inline_item flex2">
                <el-select v-model="row.value1" placeholder="请选择" clearable style="width: 100%;">
                    <el-option v-for="(item, index) in (options[`type_${row.type}`] || [])" :key="index"
                               :label="item.display_text" :value="item.value" />
                </el-select>
            </div>
            <div class="inline_item">
                <el-checkbox v-model="row.value3" :true-label="1"
                             :false-label="0">往来单位
                </el-checkbox>
            </div>
        </template>
        <template v-else>
            <el-select v-model="row.value1" placeholder="请选择" clearable style="width: 100%;">
                <el-option v-for="(item, index) in (options[`type_${row.type}`] || [])" :key="index"
                           :label="item.display_text" :value="item.value" />
            </el-select>
        </template>
    </div>
</template>

<script>
export default {
    name: "RuleItem",
    props: {
        params: Object,
        options: Object,
    },
    data() {
        return {
            row: {},
            column: {},
        };
    },
    watch: {
        params: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        async init() {
            const { row, column } = this.params;
            this.row = row;
            this.column = column;
        },
        handleChangeInput(value, row) {
            const _this = this;
            if (row.type === 1) {
                _this.$set(row, 'value1', value);
            }
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.rule_item_container {
    width: 100%;
    display: flex;

    .inline_item {
        display: inline-block;
        vertical-align: top;
        flex: 1;
        margin: 0 5px;

        &.flex2 {
            flex: 2;
        }
    }
}
</style>
